<template>
	<view class="container">
		<view class="example">
			<uni-forms ref="form" :model="fullfill" labelWidth="90px">
				<uni-forms-item label="充装车辆" name="carId" required>
					<uni-data-select v-model="fullfill.carId" :localdata="carInfoList" @change="changeCarInfo">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="所属单位" name="customerName" >
					<uni-easyinput v-model="fullfill.customerName" disabled />
				</uni-forms-item>
				<uni-forms-item label="充装气站" name="stationId" required>
					<uni-data-select v-model="fullfill.stationId" :localdata="stationInfoList"
						@change="changeStationInfo"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="充气量" name="fullfillAmount">
					<uni-easyinput v-model="fullfill.fullfillAmount" />
				</uni-forms-item>
				<uni-forms-item label="销售价格" name="salePrice">
					<uni-easyinput v-model="fullfill.salePrice" />
				</uni-forms-item>
				<uni-forms-item label="充装人" name="recordPerson">
					<uni-easyinput v-model="fullfill.recordPerson" disabled />
				</uni-forms-item>
				<!-- <uni-forms-item label="充装人电话" name="registerTele">
					<uni-easyinput v-model="fullfill.registerTele" disabled />
				</uni-forms-item> -->
				<uni-forms-item label="充装时间" name="recordTime">
					<uni-datetime-picker v-model="recordTime"></uni-datetime-picker>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import { getRecentCarInfoList } from "@/api/gas/get_in"
	import { getCustomerInfoList } from "@/api/base/customer"
	import { getStationInfoList } from "@/api/base/station"
	import { getUserProfile } from "@/api/system/user"
	import { addFullfillInfo } from "@/api/gas/fullfill"
	import format from '@/plugins/format.js'

	export default {
		data() {
			return {
				stationInfoList: [],
				stationInfoList_s: {},
				customerInfoList: [],
				customerInfoList_s: {},
				carInfoList: [],
				carInfoList_s: {},
				recordTime: "",
				fullfill: {
					fullfillAmount: "",
					salePrice: "",
					recordPerson: "",
					recordTime: "",
					carId: "",
					carHeadNum: "",
					customerId: "",
					customerName: "",
					stationId: "",
					stationName: ""
				},
				user: {
					nickName: "",
					phonenumber: ""
				},
				rules: {
					carId: {
						rules: [{
							required: true,
							errorMessage: '车辆不能为空'
						}]
					},
					fullfillAmount: {
						rules: [{
							required: true,
							errorMessage: '充气量不能为空'
						}, {
							pattern: /^\d+[.]?\d{0,2}$/,
							errorMessage: "必须为正整数或小数保留两位小数"
						}]
					},
					salePrice: {
						rules: [{
							required: true,
							errorMessage: '销售价格不能为空'
						}, {
							pattern: /^\d+[.]?\d{0,2}$/,
							errorMessage: "必须为正整数或小数保留两位小数"
						}]
					},
					stationId: {
						rules: [{
							required: true,
							errorMessage: '气站不能为空'
						}]
					}
				}
			}
		},
		onLoad() {
			this.getRecentCarInfoList();
			this.getStationInfoList();
			this.initTime();
			this.getUser();
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data
					this.fullfill.recordPerson = this.user.nickName
					this.fullfill.registerTele = this.user.phonenumber
				})
			},
			initTime() {
				this.recordTime = new Date();
				this.fullfill.recordTime = format( this.recordTime, 'YYYY-MM-DD HH:mm:ss')
			},
			getStationInfoList() {
				getStationInfoList().then(response => {
					var data = [],
						data_s = {};
					response.rows.forEach(function(row, index) {
						var stationInfo = {
							text: row.stationName,
							value: row.stationId
						}
						data.push(stationInfo)
						data_s[row.stationId] = row.stationName
					})
					this.stationInfoList = data
					this.stationInfoList_s = data_s
				})
			},
			getRecentCarInfoList() {
				var params = {}, now = new Date();
				      params.confirmTime = format(now, 'YYYY-MM-DD HH:mm:ss')
				      now.setDate(now.getDate() - 5);
				      params.createTime = format(now, 'YYYY-MM-DD HH:mm:ss')
				      params.status = '0'
				getRecentCarInfoList(params).then(response => {
					var data = [],
						data_s = {};
					response.rows.forEach(function(row, index) {
						var carInfo = {
							text: row.carHeadNum,
							value: row.carId
						}
						data.push(carInfo)
						data_s[row.carId] = row
					})
					this.carInfoList = data
					this.carInfoList_s = data_s
				})
			},
			// getCustomerInfoList() {
			// 	getCustomerInfoList().then(response => {
			// 		var data = [],
			// 			data_s = {};
			// 		response.rows.forEach(function(row, index) {
						// var customerInfo = {
						// 	text: row.customerName,
						// 	value: row.customerId
						// }
						// data.push(customerInfo)
						// data_s[row.customerId] = row.customerName
			// 		})
					// this.customerInfoList = data
					// this.customerInfoList_s = data_s
			// 	})
			// },
			changeCarInfo(e) {
				if (this.carInfoList_s[e]) {
					this.fullfill.carHeadNum = this.carInfoList_s[e].carHeadNum;
					this.fullfill.carId = this.carInfoList_s[e].carId;
					this.fullfill.customerName = this.carInfoList_s[e].customerName;
					this.fullfill.customerId = this.carInfoList_s[e].customerId;
					this.fullfill.getInId = this.carInfoList_s[e].getInId;
				}
			},
			// changeCustomerInfo(e) {
			// 	this.fullfill.customerName = this.customerInfoList_s[e]
			// },
			changeStationInfo(e) {
				this.fullfill.stationName = this.stationInfoList_s[e]
			},
			submit(ref) {
				this.$refs.form.validate().then(res => {
					addFullfillInfo(this.fullfill).then(response => {
						if (response.code == '200') {
							this.$modal.msgSuccess("充装成功")
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>
